<template>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogVisible"  :show-close="false" title="新增账号" :close-on-click-modal="false" width="20%">
    <el-card>
      <el-form ref="ruleFormRef" style="max-width: 300px" :model="ruleForm" status-icon :rules="rules"
        label-width="auto" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name"> 
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="passwordOk" type="password">
          <el-input v-model="ruleForm.passwordOk" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item style="margin-left: 100px;">
          <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
          <el-button type="primary" @click="cancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref,defineExpose,defineOptions } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const dialogVisible = ref(false)
function changeDialogVisible(val: boolean) {
  dialogVisible.value = val
}
defineExpose({
  changeDialogVisible
})
const props=defineProps({
  onSubmit:Function
})
//表单
const ruleFormRef = ref<FormInstance>()

const checkName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入姓名！'))
  }
  if (! /^[\u4e00-\u9fa5]+$/.test(value)) {
    callback(new Error('请输入汉字!'))
  } else {
    if (value.length < 2 || value.length > 10) {
      callback(new Error('姓名不小于2个汉字,不大于10个汉字! '))
    } else {
      callback()
    }
  }
}
const checkUsername = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入账号!'))
  }
  if (!/[0-9a-zA-Z]$/.test(value)) {
    callback(new Error('账号只能是数字或字母!'))
  } else if (!/^(?=.*[0-9])(?=.*[a-zA-Z]).{8,16}$/.test(value)) {
    callback(new Error('账号必须包含字母、数字,长度为8-16!'))
  }else{
    callback()
  }
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码!'))
  } else if (!/[0-9a-zA-Z]$/.test(value)) {
    callback(new Error('密码  只能是数字或字母!'))
  }
  else if (!/^(?=.*[0-9])(?=.*[a-zA-Z]).{8,16}$/.test(value)) {
    callback(new Error('密码必须包含字母、数字,长度为8-16!'))
  } else {
    if (ruleForm.passwordOk !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码!'))
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  name: '',
  username: '',
  status: null,
  password: '',
  passwordOk: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  password: [{ validator: validatePass, trigger: 'blur' }],
  passwordOk: [{ validator: validatePass2, trigger: 'blur' }],
  name: [{ validator: checkName, trigger: 'blur' }],
  username: [{ validator: checkUsername, trigger: 'blur' }],
  status: [{ required: true, message: '请设置账号状态!', trigger: 'change' },],
})
import {addUser} from '@/apis/user.js'
import { ElMessage } from 'element-plus'
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      
      //提交 请求
      const res= await addUser(ruleForm)
      console.log(res.data.code);
      if(res.data.code===0){
       ElMessage.error(res.data.msg)
        return
      }
      ElMessage.success("添加成功")
      dialogVisible.value=false

      //刷新表格
      props.onSubmit()
      
      resetForm(formEl)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
function cancel(){
  dialogVisible.value=false
  resetForm(ruleFormRef.value)
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>